<template>
 <div class="bg-gray container">   
    <div class="search-area flex">
        <form @submit="doSearch">
          <input type="search" class="search-input" placeholder="常见问题搜索">    
        </form>        
    </div>
    <div class="search-area-holder"></div>    
    <xd-datalist ref="datalist" url="/api/question">
        <div class="list-container bg-white fz30" slot-scope="scope">
          <div class="flex p30 border-b" :key="item.id" v-for="item in scope.list" @click="showDetail(item.id)">
              <img src="../../assets/icons/question@2x.png" alt="" class="question-icon">
              <div class="flex-con text333">
                  {{item.title}}
              </div>
              <img src="../../assets/icons/gt.png" alt="" class="gt">
          </div> 
        </div>                
    </xd-datalist>
    <div class="footer-area-holder"></div>
    <div class="footer-area fz28 bg-white flex border-t">
        <img src="../../assets/icons/ears@2x.png" alt="" class="ears-icon">
        <div class="flex-con online-txt">
            在线客服
        </div>
        <div class="time-schedule">
            每天09:00-18:00
        </div>
        <img src="../../assets/icons/gt2@2x.png" alt="" class="gt2">
    </div>
 </div>
  
</template>

<script>

export default {
  methods: {
    doSearch(e) {
      e.preventDefault();
      let title = e.target[0].value.trim();
      this.$refs.datalist.addParam('title',title).refresh()       
    },
    showDetail(id){
      this.$router.push('question/detail?id='+id)
    }
  }
};
</script>


<style scoped>
.search-area {
  height: 1.2133rem;
  padding: 0;
  background-color: #f0f0f0;
  z-index: 100;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  align-items: center;
  justify-content: center;
}
.list-container > 
  .border-b:last-child{
    border:none;
  }

.search-input {
  display: block;
  outline: none;
  width: 7.4133rem;
  background-color: rgba(214, 214, 214, 0.47);
  background-image: url("../../assets/icons/search@2x.png");
  background-repeat: no-repeat;
  background-position: 0.2rem center;
  background-size: 0.32rem 0.32rem;
  border-radius: 0.0667rem;
  padding: 0.2rem 0.2rem 0.2rem 0.6667rem;
  border: none;
}
.question-icon {
  width: 0.56rem;
  height: 0.56rem;
  margin-right: 0.28rem;
}
.online-txt {
  color: #f02320;
}
.search-area-holder {
  height: 1.2133rem;
}
.footer-area-holder {
  height: 1.24rem;
}
.footer-area {
  height: 1.24rem;
  padding: 0 0.4rem;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
.ears-icon {
  width: 0.6533rem;
  height: 0.64rem;
  margin-right: 0.3333rem;
}
.time-schedule {
  color: #34a359;
}
.gt2 {
  width: 0.1333rem;
  height: 0.28rem;
  margin-left: 0.4267rem;
}
</style>

